<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>upload</title>
    <style>
        #imgPreview {
            width: 30%;
            height: 180px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        
        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }
        
        #imgSpan {
            position: absolute;
            left: 38%;
            top: 50%;
        }
        
        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        
        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
    </style>

</head>

<body>
    <div id="imgPreview">
        <div id="prompt3">
            <span id="imgSpan">
        点击上传
        <br />
        <i class="aui-iconfont aui-icon-plus"></i>
        <!--AUI框架中的图标-->
        </span>
            <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
            <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
        </div>
        <img src="#" id="img3" />
    </div>

    <script>
        function changepic() {
            $("#prompt3").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file').files[0];
            reads.readAsDataURL(f);
            reads.onload = function(e) {
                document.getElementById('img3').src = this.result;
                $("#img3").css("display", "block");
            };
        }
    </script>
</body>

</html>